<template>
    <div class="type-detail-box" v-loading="loading">
        <el-form
            :model="detail"
            :rules="rules"
            ref="ruleForm"
            hide-required-asterisk
            style="max-width:600px"
            label-width="100px">
            <el-form-item label="游戏类型" prop="name">
                <el-input v-model.trim="detail.name"></el-input>
            </el-form-item>
            <el-form-item label="同步至排行榜">
                <el-switch v-model="detail.synchronizeToRank"></el-switch>
            </el-form-item>
        </el-form>

        <div class="table-box">
            <div class="title-box">
                <div class="item" style="flex:1;">顺序</div>
                <div class="item" style="flex:1;">关联标签</div>
                <div class="item" style="flex:1;">同步至排行榜</div>
                <div class="item" style="flex:1;">关联游戏数</div>
                <div class="item" style="flex:1;">操作</div>
            </div>
            <div class="content-box" v-if="detail.adminGameTagVoList && detail.adminGameTagVoList.length">
                <div class="dragging-item"
                    v-for="(item, index) in detail.adminGameTagVoList"
                    v-dragging="{ item: item, list: detail.adminGameTagVoList}"
                    :key="index">
                    <div class="item" style="flex:1;">{{index + 1}}</div>
                    <div class="item" style="flex:1;">
                        <el-select v-model="item.tagName" placeholder="选择关联标签" filterable @change="tagsChange($event, item)">
                            <el-option :label="_item.tag" :value="_item.tag" v-for="_item in tagsList" :key="_item.id" :disabled="_item.disabled"></el-option>
                        </el-select>
                    </div>
                    <div class="item" style="flex:1;">
                        <el-switch v-model="item.status" :active-value="1" :inactive-value="0"></el-switch>
                    </div>
                    <div class="item" style="flex:1;">{{item.gameCount}}</div>
                    <div class="item" style="flex:1;">
                        <div style="margin-right:10px"><el-button type="text" size="small" @click="addToUp(index)">向上添加</el-button></div>
                        <div style="margin-right:10px"><el-button type="text" size="small" @click="addToDown(index)">向下添加</el-button></div>
                        <div v-if="detail.adminGameTagVoList && detail.adminGameTagVoList.length > 1" style="margin-right:10px"><el-button type="text" size="small" @click="delItem(index)" style="color:red;">删除</el-button></div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="changeNum > 1">
            <el-button @click="cancleSave">取 消</el-button>
            <el-button v-if="detail.category" type="primary" @click="saveType">保 存</el-button>
            <el-button v-else type="success" @click="saveType">新 建</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: true,
            detail: {
                category: '',
                name: '',
                adminGameTagVoList: [
                    { tagName: '', gameCount: '-', status: 1 }
                ],
                synchronizeToRank: true
            },
            currentDetail: {
                category: '',
                name: '',
                adminGameTagVoList: [
                    { tagName: '', gameCount: '-', status: 1 }
                ],
                synchronizeToRank: true
            },
            tagsList: [], // 标签列表
            rules: {
                name: [
                    { required: true, message: '请输入游戏类型', trigger: 'blur' }
                ]
            },
            changeNum: 0
        }
    },

    watch: {
        detail: {
            handler (val) {
                this.changeNum++
            },
            deep: true
        }
    },

    created () {
        if (this.$route.query.id) {
            this.getDetail()
        } else {
            this.changeNum = 1
            this.getGameTagList()
        }
    },

    methods: {
        async getDetail () {
            let res = await this.$http.post('/game/selectGameCategory', {
                categoryId: this.$route.query.id
            })
            if (res.code === '0') {
                this.detail = res.data
                this.currentDetail = JSON.parse(JSON.stringify(res.data))
                this.getGameTagList()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
                this.loading = false
            }
        },

        // 获取标签列表
        async getGameTagList () {
            let res = await this.$http.post('/game/findTags')
            if (res.code === '0') {
                res.data.sort((param1, param2) => {
                    let str1 = param1.tag || ''
                    let str2 = param2.tag || ''
                    return str1.localeCompare(str2, 'zh-CN')
                })
                this.tagsList = res.data || []
                this.tagsInit()
            } else {
                this.tagsList = []
            }
            this.loading = false
        },

        // 禁用已选中标签
        tagsInit () {
            let list = []
            this.detail.adminGameTagVoList.forEach(item => {
                list.push(item.tagName)
            })
            this.tagsList.forEach(item => {
                if (list.includes(item.tag)) {
                    item.disabled = true
                } else {
                    item.disabled = false
                }
            })
        },

        // 重置状态
        tagsChange (e, item) {
            this.tagsList.forEach(_item => {
                if (e === _item.tag) {
                    item.gameCount = _item.gameNum
                    item.tagId = _item.id
                    item.status = _item.status
                }
            })
            this.tagsInit()
        },

        // 取消保存
        cancleSave () {
            this.changeNum = 0
            this.detail = JSON.parse(JSON.stringify(this.currentDetail))
        },

        // 向上添加
        addToUp (index) {
            this.detail.adminGameTagVoList.splice(index, 0, {
                tagName: '',
                gameCount: '-'
            })
        },

        // 向下添加
        addToDown (index) {
            this.detail.adminGameTagVoList.splice(index + 1, 0, {
                tagName: '',
                gameCount: '-'
            })
        },

        // 删除
        delItem (index) {
            this.detail.adminGameTagVoList.splice(index, 1)
            this.tagsInit()
        },

        // 新建类型
        createType () {
        },

        // 保存类型
        saveType () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    for (let i = 0; i < this.detail.adminGameTagVoList.length; i++) {
                        let item = this.detail.adminGameTagVoList[i]
                        if (!item.tagName) {
                            this.$message({
                                type: 'error',
                                message: `第 ${i + 1} 条 关联标签未选择，请选择后保存`
                            })
                            return
                        }
                    }
                    if (this.detail.category) {
                        this.saveOldType()
                    } else {
                        this.saveNewType()
                    }
                } else {
                    return false
                }
            })
        },

        // 新建类型
        async saveNewType () {
            this.detail.adminGameTagVoList.forEach((item, index) => {
                item.tagSort = index + 1
            })
            let res = await this.$http.post('/game/createGameCategory', this.detail)
            if (res.code === '0') {
                this.currentDetail = JSON.parse(JSON.stringify(this.detail))
                this.$message({
                    type: 'success',
                    message: '新建成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 更改类型
        async saveOldType () {
            this.detail.adminGameTagVoList.forEach((item, index) => {
                item.tagSort = index + 1
            })
            let res = await this.$http.post('/game/updateGameCategory', this.detail)
            if (res.code === '0') {
                this.currentDetail = JSON.parse(JSON.stringify(this.detail))
                this.changeNum = 1
                this.$message({
                    type: 'success',
                    message: '保存成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .type-detail-box {
        .table-box {
            margin: 20px 0;
            border: 1px solid #ebeef5;
            border-bottom: none;
            border-right: none;
            .title-box {
                display: flex;
                border-bottom: 1px solid #ebeef5;
                // border-right: 1px solid #ebeef5;
                .item {
                    display: flex;
                    align-items: center;
                    // flex: 1;
                    padding: 10px;
                    height: 60px;
                    font-size: 14px;
                    color: #909399;
                    font-weight: bold;
                    border-right: 1px solid #ebeef5;
                }
            }

            .content-box {
                .dragging-item {
                    display: flex;
                    border-bottom: 1px solid #ebeef5;
                    .item {
                        // flex: 1;
                        padding: 10px;
                        font-size: 14px;
                        color: #606266;
                        display: flex;
                        align-items: center;
                        // justify-content: center;
                        border-right: 1px solid #ebeef5;
                    }
                }
            }
        }
    }
</style>
